<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/header.css" rel="stylesheet" />
		<link href="../fonticon/iconfont.css" rel="stylesheet" />
	</head>

	<body>
		<!-- mhead 带有返回箭头的导航栏 -->
		<header class="mui-bar mui-bar-nav title">
			<h1 class="mui-title title-color">首 页</h1>
		</header>
		<!-- 主体部分 -->
		<div class="mui-content">
			
		</div>
		<!-- 底部选项卡 mtab --> 
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" tabindex="0">
				<span class="mui-icon mui-icon-chat"></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item" tabindex="1">
				<span class="mui-icon iconfont icon-lianxiren"></span>
				<span class="mui-tab-label">联系人</span>
			</a>
			<a class="mui-tab-item" tabindex="2">
				<span class="mui-icon mui-icon-pengyouquan"></span>
				<span class="mui-tab-label">发现</span>
			</a>
			<a class="mui-tab-item" tabindex="3">
				<span class="mui-icon iconfont icon-shouye"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<script src="../js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			//定义用于存储选项卡页面的数组
			var subPages= [
				{
					pageId:"wechat-chatlist.html",
					pageUrl:"wechat-chatlist.html"
				},
				{
					pageId:"wechat-lianxiren.html",
					pageUrl:"wechat-lianxiren.html"
				},
				{
					pageId:"wechat-discover.html",
					pageUrl:"wechat-discover.html"
				},
				{
					pageId:"wechat-my.html",
					pageUrl:"wechat-my.html"
				}
			];
			//设置窗口打开的样式
			var pageStyle={
				top :"0px",
				bottom :"50px"
			}
			
			//所有涉及到设备的操作都在plusReady中进行
			mui.plusReady(function () {
			    //设置系统状态栏背景颜色
				plus.navigator.setStatusBarBackground("#27d0f1");
			   //设置系统字体颜色  浅色
			   plus.navigator.setStatusBarStyle("light");
			   //选项卡代码
			   //获取当前webview 对象
			   var indexWebView =plus.webview.currentWebview();
			   //  循环遍历数组，将数组中的页面都追加到当前主页webview  追加4个webview对象
			   for(var i=0;i<subPages.length;i++){
				   //将每次循环的页面  创建为webview对象
				   var  wv =plus.webview.create(subPages[i].pageUrl,subPages[i].pageId,pageStyle);
				   //创建后 将其隐藏并追加到主页webview窗口对象中
				   wv.hide();
				   indexWebView.append(wv);
			   }
			   //设置默认窗口页面
			   plus.webview.show(subPages[0].pageId);
			   //批量绑定  tap 事件
			   mui(".mui-bar-tab").on("tap","a",function(){
				   var tabindex=this.getAttribute("tabindex");
				   //显示点击的tab选项卡所对应的webview 窗口
				   plus.webview.show(subPages[tabindex].pageId,"fade-in",200);
				   //循环控制隐藏不需要的页面
				   for(var i=0;i<subPages.length;i++){
					   if(i!=tabindex){
						   plus.webview.hide(subPages[i].pageId,"fade-out",200);
					   }
				   } 
			   })
			});
		</script>
	</body>

</html>
